<!DOCTYPE html>
<html>
<head>
        <style>
            #box
            {
                background-color: #d2f10ae2;
                margin: 0 auto;
                height: 40px;
            }
            #box ul
            {
                /* 不显示列表标记 */
                list-style: none;
            }
            #box ul li
            {
                /* 列表宽度 */
                width: 80px;
                /* 列表高度 */
                height: 40px;
                text-align: center;
                line-height: 40px;
                /* 浮动:将列表元素水平排列 */
                float: left;
            }
            #box ul li.strong
            {
                /* 加粗 */
                font-weight: blod;
            }
            /* 设置鼠标属性 */
            #box ul li:hover
            {
                /* 鼠标触碰变颜色 */
                background-color: greenyellow;
                /* 鼠标触碰有下划线 */
                text-decoration: underline;
                /* 鼠标触碰变手型 */
                cursor: pointer;
            }
            #box ul li a
            {
                text-decoration: none;
                color: black;
            }
            #box ul li:hover a
            {
                text-decoration: underline;
                color: #fc6;
            }
        </style>
    <meta charset="UTF-8" />
    <title>列表属性</title>
</head>
<body>
    <div id="box">
        <ul>
            <li class="strong">新闻</li>
            <li>军事</li>
            <li>社会</li>
            <li>国际</li>
        </ul>
    </div>
</body>
</html>